<template>
  <div class="BroadCastStation">
    <template v-if="banners && shear_recommend && optimiz && shear_hours && shear_hot && classify">
      <div class="swiper-container main-swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="item in banners" :key="item.bannerId">
            <img :src="item.pic" alt="" />
            <span>{{ item.typeTitle }}</span>
          </div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination main-swiper-pagination"></div>
      </div>
      <div class="recommend">
        <ModuleTitle>
          <template #main>
            <span>推荐电台</span>
          </template>
          <template #sub>
            <span @click="switchNew">换一批</span>
          </template>
        </ModuleTitle>
        <ul class="broadCastList">
          <broadCastITem v-for="item in shear_recommend" :key="item.id" :item="item"></broadCastITem>
        </ul>
      </div>
      <div class="optimiz recommend">
        <ModuleTitle>
          <template #main>
            <span>今日优选</span>
          </template>
          <template #sub>
            <span @click="play">开始收听</span>
          </template>
        </ModuleTitle>
        <ul class="broadCastList">
          <broadCastITem v-for="item in optimiz" :key="item.id" :item="item"></broadCastITem>
        </ul>
      </div>
      <div class="hours recommend">
        <ModuleTitle>
          <template #main>
            <span>24小时节目榜</span>
          </template>
          <template #sub>
            <span @click="ToMore('24小时节目榜',hours)">查看更多</span>
          </template>
        </ModuleTitle>
        <ul class="broadCastList">
          <broadCastITem v-for="item in shear_hours" :key="item.id" :item="item"></broadCastITem>
        </ul>
      </div>
      <div class="hot recommend">
        <ModuleTitle>
          <template #main>
            <span>热门电台榜</span>
          </template>
          <template #sub>
            <span @click="ToMore('热门电台榜',hot)">查看更多</span>
          </template>
        </ModuleTitle>
        <ul class="broadCastList">
          <broadCastITem v-for="item in shear_hot" :key="item.id" :item="item"></broadCastITem>
        </ul>
      </div>
      <div class="classify">
        <ModuleTitle>
          <template #main>
            <span>热门分类</span>
          </template>
          <template #sub>
            <span @click="ToMores('热门分类','')">更多</span>
          </template>
        </ModuleTitle>
        <ul>
          <li v-for="(item,index) in classify" :key="item.categoryId" @click="ToMores('热门分类',index)">
            <img :src="iconStr[index]" alt="">
            <span>{{item.categoryName}}</span>
          </li>
        </ul>
      </div>
      <footer>
        —— 我也是有底线的 ——
      </footer>
    </template>
    <template v-else>
      <div class="load">
        <div>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <p>加载中...</p>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
import Swiper from "swiper/swiper-bundle";
import "swiper/swiper-bundle.min.css";
import broadCastITem from '../components/broadCastITem'
import ModuleTitle from '../components/ModuleTitle'
export default {
  components:{
    broadCastITem,
    ModuleTitle
  },
  data(){
    return {
      banners: null,
      recommend:null,
      shear_recommend:[],
      length_commend:0,
      optimiz:null,
      hours:null,
      shear_hours:null,
      hot:null,
      shear_hot:null,
      classify:null,
      iconStr:[
        '',
        '',
        '',
        '',
        '',
        '',
      ]
    }
  },
  created() {
    this.axios.get("/dj/banner").then((response)=>{
      this.banners = response.data.data
    });
    this.axios.get("/dj/recommend").then((response)=>{
      this.recommend = response.data.djRadios;
      this.shear_recommend = this.recommend.slice(0,3);
    })
    this.axios.get("/dj/today/perfered").then((response)=>{
      this.optimiz = response.data.data;
      this.optimiz = this.optimiz.map(item=>{
        return {...item,dj:{nickname:item.lastProgramName}}
      })
    })
    this.axios.get("/dj/program/toplist/hours?limit=48").then((response)=>{
      this.hours = response.data.data.list;
      this.hours = this.hours.map(item=>{
        return {...item,subCount:item.program.radio.subCount,id:item.program.radio.id,picUrl:item.program.coverUrl,dj:item.program.dj,name:item.program.name}
      })
      this.shear_hours = this.hours.slice(0,6)
    })
    this.axios.get("/dj/toplist?type=hot&limit=50").then((response)=>{
      this.hot = response.data.toplist;
      this.shear_hot = this.hot.slice(0,6);
    })
    this.axios.get("/dj/category/recommend").then((response)=>{
      this.classify = response.data.data.slice(0,6);
    })
  },
  methods:{
    switchNew(){
      this.shear_recommend = this.recommend.slice(this.length_commend,this.length_commend+3);
    },
    ToMore(title,data){
      this.$router.push({
        path:'/BroadCastMore',
        name:'BroadCastMore',
        query:{
          title
        },
        params:{
          data
        }
      })
    },
    ToMores(title,hash){
      this.$router.push({
        path:'/BroadCastMore',
        name:'BroadCastMore',
        query:{
          title
        },
        hash:'#k_' + hash
      })
    },
    play(){
      this.axios.get("/dj/program?limit=40&rid=" + this.optimiz[0].id).then(response=>{
        this.$store.state.play.currentList = response.data.programs;
        this.$store.state.play.currentMusic ={
          id:response.data.programs[0].mainSong.id,
          al:{
            name:response.data.programs[0].name,
            picUrl:response.data.programs[0].dj.avatarUrl
          },
          name:response.data.programs[0].name
        }
      }).then(()=>{
          this.axios.get("/lyric?id=" + this.optimiz[0].id).then(response=>{
              if(!response.data.lrc){
                this.$store.state.play.lyric = [{text:'暂无歌词'}]
                return;
              }
              this.lyricStr = response.data.lrc.lyric;
              var patt = /\[\d{2}:\d{2}\.\d{2,3}\]/gi;
              this.lyricStr = this.lyricStr
              .split("\n")
              .filter(e=>e)
              .map(str=>{
                  var time = str.match(patt)[0].replace(/(\[|\])/gi,"");
                  var timeArr = time.split(":");
                  time = Number(timeArr[0]) * 60 + Number(timeArr[1]);
                  var text = str.replace(patt,"");
                  return {time,text};
              })
              if(this.currentMusic.id == this.optimiz[0].id){
                this.$store.state.play.lyric = this.lyricStr
              }
          });
      });
    }
  },
  watch:{
    banners() {
      setTimeout(() => {
        new Swiper(".main-swiper-container", {
          loop: true,
          pagination: {
            el: ".main-swiper-pagination",
          },
          autoplay: true,
        });
      }, 500);
    },
    shear_recommend(){
      this.length_commend = this.shear_recommend.length + this.length_commend;
      if(this.length_commend>=this.recommend.length-1){
        this.length_commend = 0;
      }
    },
  },
}
</script>

<style lang="less">
.BroadCastStation{
  width: 100%;
  padding-top: 100px;
  .load{
    width: 100vw;
    height: calc(100vh - 150px);
    position: relative;
    >div{
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      text-align: center;
      p{
        font-size: 14px;
        // color: #ff0000;
        font-weight: bold;
      }
      i{
        display: inline-block;
        width: 3px;
        height: 22px;
        background-color: red;
        margin-left: 3px;
        animation: jump .6s infinite -0.4s linear alternate;
        transform-origin: center bottom;
        &:nth-child(2){
          animation-delay: -0.2s;
        }
        &:nth-child(3){
          animation-delay: 0s;
        }
        &:nth-child(4){
          animation-delay: 0.2s;
        }
        &.pause{
          animation-play-state: paused;
        }
      }
      @keyframes jump {
        0%{
        }
        100%{
          transform: scaleY(0);
        }
      }
    }
    
  }
  .main-swiper-container{
    width: 100%;
    margin-bottom: 20px;
    .swiper-wrapper {
      .swiper-slide {
        span {
          position: absolute;
          right: 0;
          bottom: 5px;
          color: white;
          padding: 6px 10px 6px 15px;
          background-color: #d44a42;
          border-radius: 20px 0 0 20px;
          font-size: 14px;
        }
        img {
          vertical-align: middle;
        }
      }
    }
    .swiper-pagination-bullet {
      background-color: rgba(255, 255, 255, 1);
    }
    .swiper-pagination-bullet-active {
      opacity: 1;
      background-color: #cc5249;
    }
  }
  .recommend{
    width: 100%;
    padding: 0 10px;
    .broadCastList{
      width: 100%;
      display: flex;
      flex-wrap: wrap;
    }
  }
  .classify{
    width: 100%;
    padding-bottom: 10px;
    .ModuleTitle{
      padding: 0 5px;
    }
    ul{
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      li{
        height: 50px;
        flex: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        border-top: 1px solid #e4e6e7;
        position: relative;
        &:nth-child(2n){
          &::before{
            content: "";
            width: 1px;
            height: 30px;
            display: block;
            background-color: #e4e6e7;
            position: absolute;
            left: 0;
          }
        }
        &:last-child,&:nth-child(5){
          border-bottom: 1px solid #e4e6e7;
        }
        img{
          margin-right: 20px;
        }
      }
    }
  }
  footer{
    width: 100%;
    text-align: center;
    color: #dee0e1;
    padding-bottom: 10px;
  }
}
</style>